<template>
	<view class="content" :style="'background-image: url('+bg+');'">
		<view class="login">
			<view class="login-title">
				<view class="login-title-1 text-white">
					扫地僧
				</view>
				<view class="login-title-2">
					一屋不少何以扫天下
				</view>
			</view>
			<button class="login-fac text-white shadow-blur shadow shadow-lg">
				<view class="login-fac-title text-green text-shadow font-weight-bold">
					LOG IN WITH WeChat
				</view>
				<text class="login-fac-icon text-green cuIcon-weixin text-shadow "></text>
			</button>
			<view class="login-tip">
				<view class="login-tip-1">
					Design By GGB ！ 
				</view>
				<view class="login-tip-2">
					Theme of Use
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg:'https://th.bing.com/th/id/R248ec20fd38ce4e7a9650480600ad165?rik=UCgO%2btVRsNC%2f1A&riu=http%3a%2f%2fstatic.cntonan.com%2fuploadfile%2f2018%2f1120%2f201811202001342e5ul3nsjlb.jpg&ehk=%2bjcvIQa8QIIPWrTnx48kqqnRnfTzwvykcXF9I4Jag%2bc%3d&risl=&pid=ImgRaw'
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style>
	.content{
		width: 100vw;
		height: 100vh;
		
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.content .uni-title{
		color: #6f6f6f;
		font-size: 20px;
		text-align: center;
		margin: 30upx;
		border-bottom: 1px solid #c9c9c9;
	}
	.content .uni-title:nth-child(1){
		color: #EE5B5B;
		border-bottom: 1px solid #EE5B5B;
	}
	.content .login{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.login .login-title{
		width: 550upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 440upx;
	}
	.login .login-title .login-title-1{
		font-size: 46px;
		font-weight: bold;
		letter-spacing: 5upx;
	}
	.login .login-title .login-title-2{
		margin-top: 5upx;
		font-size: 18px;
	}
	.login .login-fac{
		margin-top:180upx;
		width: 560upx;
		height: 110upx;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		/* background-color: #3B5998; */
		border-radius: 25px;
	}
	.login-fac .login-fac-title{
		font-size: 15px;
		margin-left: 58upx;
		margin-right: 20rpx;
	}
	.login-fac .login-fac-icon{
		font-size: 20px;
		margin-right: 30upx;
	}
	.login-emi{
		margin-top: 70upx;
		width: 560upx;
		height: 110upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #EE5B5B;
		border-radius: 25px;
	}
	.login-emi .login-emi-title{
		font-size: 15px;
		margin-left: 128upx;
	}
	.login-emi .login-emi-icon{
		font-size: 20px;
		margin-right: 30upx;
	}
	.sign{
		margin-top: 100upx;
		width: 560upx;
		height: 110upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: transparent;
		border: 1px solid #FFFFFF;
		border-radius: 25px;
	}
	.sign .sign-title{
		font-size: 15px;
		margin-left: 212upx;
	}
	.sign .sign-icon{
		font-size: 20px;
		margin-right: 30upx;
	}
	.login-tip{
		width: 560upx;
		position: absolute;
		bottom: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login-tip .login-tip-2{
		margin-left: 8upx;
		text-decoration: underline;
	}
	
	.content .Btn{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		text-align: center;
		font-size: 36px;
		position: absolute;
		bottom: 60upx;
		right: 30upx;
	}
</style>
